<template>
	<view class="dx-body">
		<dx-table ref="table" :header="tableHeader" :tableParams="tableParams">
			<!-- 自定义列 -->
			<template #column-role="scoped">
				<template v-if="Array.isArray(scoped.row.role) && scoped.row.role.length">
					<el-tag v-for="(val, index) in scoped.row.role" :key="val" :class="{ 'ml-8px': index > 0 }">{{ val }}</el-tag>
				</template>
				<template>
					<span></span>
				</template>
			</template>
			<template #column-dcloud_appid="scoped">
				<template v-if="Array.isArray(scoped.row.dcloud_appid) && scoped.row.dcloud_appid.length">
					<view style="display: flex; flex-wrap: wrap">
						<el-tag size="small" v-for="(val, index) in scoped.row.dcloud_appid" :key="val" class="mb-5px" :class="{ 'ml-8px': index > 0 }">{{
							formatAppName(val)
						}}</el-tag>
					</view>
				</template>
				<template>
					<span></span>
				</template>
			</template>
			<!-- 自定义表单 -->
			<template #form-dcloud_appid="scoped">
				<el-checkbox-group v-model="scoped.row.dcloud_appid">
					<el-checkbox v-for="item in dcloudAppidList" :key="item.value" :value="item.value" :label="item.label"></el-checkbox>
				</el-checkbox-group>
			</template>
		</dx-table>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getAppList } from '@/uni_modules/dx-admin/api/index';
const tableHeader = reactive({
	tips: '用户管理',
});
const dcloudAppidList = ref<any[]>([]);
getAppList().then((res) => {
	if (res.code === 1000) {
		dcloudAppidList.value = res.data.map((item: any) => {
			return {
				label: item.name,
				value: item.appid,
			};
		});
	}
});
const formatAppName = computed(() => (val: any) => {
	return (dcloudAppidList.value.find((item: any) => item.value === val) as any)?.label;
});
const tableParams = reactive({
	columnConfig: {
		resizable: true,
	},
	rowConfig: {
		isCurrent: false,
		isHover: true,
		height: 55,
	},
	showOverflow: 'tooltip',
	urls: {
		index: 'user/index',
		add: 'user/add',
		edit: 'user/edit',
		del: 'user/del',
		multi: 'user/multi',
	},
	columns: [
		{ type: 'checkbox', width: '60px', operator: false },
		{ type: 'seq', label: '序号', width: '60px', operator: false },
		{
			label: '用户名',
			field: 'username',
			width: '120px',
			rules: [
				{
					required: true,
					message: '用户名不能为空',
				},
			],
		},
		{
			label: '头像',
			field: 'avatar',
			width: '80px',
			render: 'dx-image',
			component: {
				name: 'dx-upload',
			},
			rules: [
				{
					required: true,
					message: '头像不能为空',
				},
			],
		},
		{ label: '用户昵称', field: 'nickname', width: '180px' },
		{
			label: '手机号码',
			field: 'mobile',
			width: '180px',
			rules: [
				{
					required: true,
					message: '手机号码不能为空',
				},
				{
					pattern: /^1[3456789]\d{9}$/,
					message: '手机号码格式不正确',
				},
			],
		},
		{
			label: '性别',
			field: 'gender',
			width: '80px',
			value: 1,
			component: {
				name: 'el-radio-group',
				options: [
					{ label: '男', value: 1 },
					{ label: '女', value: 2 },
				],
			},
			formatter: function ({ cellValue }: any) {
				return cellValue == 1 ? '男' : cellValue == 2 ? '女' : '未知';
			},
		},
		{
			label: '邮箱',
			field: 'email',
			width: '180px',
			rules: [
				{
					pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/,
					message: '邮箱格式不正确',
				},
			],
		},
		{
			label: '角色',
			field: 'role',
			minWidth: '180px',
			component: {
				name: 'dx-select',
				props: {
					url: 'role/list',
					labelField: 'role_name',
					valueField: 'role_id',
					multiple: true,
				},
			},
		},
		{
			label: '密码',
			field: 'password',
			operator: false,
			visible: false,
			edit: '',
			rules: [
				// 密码长度8-16位
				{
					pattern: /^.{6,16}$/,
					message: '密码长度8-16位',
				},
			],
		},
		{
			label: '可登录应用',
			field: 'dcloud_appid',
			minWidth: '180px',
			value: [],
		},
		{
			label: '用户状态',
			field: 'status',
			width: '120px',
			value: 0,
			component: {
				name: 'el-radio-group',
				options: [
					{ label: '正常', value: 0 },
					{ label: '禁用', value: 1 },
					{ label: '审核中', value: 2 },
					{ label: '审核拒绝', value: 3 },
				],
			},
			render: function (h: any, row: any) {
				// 户状态：0 正常 1 禁用 2 审核中 3 审核拒绝
				return h(
					ElTag,
					{
						type: row.status == 1 ? 'danger' : row.status == 2 ? 'info' : row.status == 3 ? 'warning' : void 0,
					},
					() => ['正常', '禁用', '审核中', '审核拒绝'][row.status]
				);
			},
		},
		{
			label: '最后登录时间',
			field: 'last_login_date',
			width: '180px',
			form: false,
			formatter: 'dxFormatDate', //['dxFormatDate','yyyy-MM-dd HH:mm']
			search: {
				component: {
					name: 'el-date-picker',
				},
			},
		},
		{
			label: '创建时间',
			field: 'create_date',
			form: false,
			width: '180px',
			formatter: 'dxFormatDate',
		},
		{
			type: 'operate',
			label: '操作',
			width: '120px',
			fixed: 'right',
			operator: false,
			permission: ['dx-func-admin/user/edit', 'dx-func-admin/user/del'],
			buttons: ['edit', 'del'],
		},
	],
});
const table = ref();
// 加载表单数据
function getTableList() {
	table.value.getTableList();
}
onLoad(() => {
	nextTick(getTableList);
});
</script>

<style lang="scss"></style>
